<script setup lang="ts">
import { useRoute, useRouter } from "vue-router";
import { useUser } from "@/stores/useUser";
import Block from "@/components/Block.vue";

const route = useRoute();
const router = useRouter();
const userStore = useUser();
const go = (route: string) => {
	router.push(route);
};
const logout = () => {
	userStore.logout();
};
</script>

<template>
	<header>
		<figure class="logo">
			<img src="@/assets/images/vue.svg" alt="" />
			<figcaption>博雅国际</figcaption>
		</figure>
		<figure v-if="userStore.token" class="avatar">
			<img src="@/assets/images/vue.svg" alt="" />
			<span>管理员</span>
			<figcaption>Admin</figcaption>
			<ul>
				<li>设置</li>
				<li @click="logout()">退出登录</li>
			</ul>
		</figure>
		<a v-else href="#" @click.prevent="go('/login')">请登录</a>
	</header>
	<main>
		<div class="side-bar">
			<menu>
				<Block height="70px" />
				<button :class="{ active: route.name == '首页' }" @click="go('/')">首页</button>
				<button :class="{ active: route.name == '用户管理' }" @click="go('/user-management')">用户管理</button>
				<button :class="{ active: route.name == '报名管理' }" @click="go('/signup-management')">报名管理</button>
			</menu>
		</div>
		<div class="container">
			<Block height="70px" />
			<RouterView v-slot="{ Component }">
				<Transition name="fade" mode="out-in">
					<KeepAlive>
						<Component :is="Component" />
					</KeepAlive>
				</Transition>
			</RouterView>
		</div>
	</main>
</template>

<style scoped lang="scss">
header {
	box-sizing: border-box;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 20px;
	width: 100%;
	height: 70px;
	backdrop-filter: blur(10px);
	box-shadow: 0 0 3px 1px #ccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 2;
	.logo {
		column-gap: 10px;
		display: flex;
		align-items: center;
		img {
			width: 50px;
			height: 50px;
		}
		figcaption {
			font-size: 24px;
		}
	}
	.avatar {
		position: relative;
		display: flex;
		column-gap: 6px;
		align-items: center;
		cursor: default;
		img {
			width: 30px;
			height: 30px;
			border-radius: 50%;
		}
		span {
			padding: 0 6px;
			color: var(--primary-color);
			font-size: 12px;
			line-height: 22px;
			border-radius: 4px;
			background-color: var(--lightest-primary-color);
			border: 1px solid var(--primary-color);
		}
		figcaption {
			font-size: 16px;
		}
		ul {
			position: absolute;
			padding: 10px;
			right: 0;
			top: 100%;
			width: 100px;
			display: flex;
			flex-direction: column;
			border-radius: 10px;
			box-shadow: 0 0 3px 1px var(--primary-color);
			transform: scaleY(0);
			opacity: 0;
			transform-origin: center top;
			transition: transform 0.2s, opacity 0.2s;
			background-color: #fff;
			li {
				color: #333;
				font-size: 14px;
				line-height: 30px;
				text-align: center;
				cursor: pointer;
			}
		}
		&:hover {
			ul {
				transform: scaleY(1);
				opacity: 1;
			}
		}
	}
}
main {
	flex: 1;
	display: flex;
	overflow: hidden;
	background-color: #ffffffcc;
	backdrop-filter: blur(20px);
	.side-bar {
		width: 240px;
		backdrop-filter: blur(10px);
		box-shadow: 0 0 3px 1px #ccc;
		display: flex;
		flex-direction: column;
		z-index: 1;
		menu {
			flex: 1;
			padding: 10px 0;
			display: flex;
			flex-direction: column;
			button {
				position: relative;
				padding-left: 30px;
				height: 40px;
				font-size: 16px;
				text-align: left;
				transition: background-color 0.2s;
				&::after {
					content: "";
					position: absolute;
					top: 0;
					right: 0;
					width: 4px;
					height: 0;
					background-color: var(--primary-color);
					transition: height 0.2s;
				}
				&.active {
					color: var(--primary-color);
					background-color: var(--lightest-primary-color);
					&::after {
						height: 100%;
					}
				}
				&:hover {
					background-color: #ccc;
				}
			}
		}
	}
	.container {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}
}
</style>
